<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>

        <title>Registration</title>
        <script src="http://maps.googleapis.com/maps/api/js"></script>

        <script>
            var map;
            var myCenter = new google.maps.LatLng(51.508742, -0.120850);

            function initialize()
            {
                var mapProp = {center: myCenter, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP};
                map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
                google.maps.event.addListener(map, 'click', function (event) {
                    placeMarker(event.latLng);
                });
            }

            function placeMarker(location) {
                var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                });
                var infowindow = new google.maps.InfoWindow({content: 'Latitude: ' + location.lat() + 'Longitude: ' + location.lng()});
                infowindow.open(map, marker);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </h:head>
    <h:body>
        <div align="center">
            <h:form id="registrationform" style="width: 700px">
                <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
                <p:panel header="Registration Form">
                    <div align= "right" id="googleMap" style="width:500px;height:300px;"></div>
                    <h:panelGrid columns="3" id="regGrid">

                        <h:outputLabel for="nickname">Nickname:</h:outputLabel>
                        <p:inputText id="nickname" value="#{registrationBean.user.nickname}">
                            <p:ajax update="nickname"/>
                        </p:inputText>
                        <p:message id="nicknamemsg" for="nickname" />

                        <h:outputLabel for="name">Name:</h:outputLabel>
                        <p:inputText id="name" value="#{registrationBean.user.firstName}">
                            <p:ajax update="namemsg"/>
                        </p:inputText>
                        <p:message id="namemsg" for="name" />

                        <h:outputLabel for="surname">Surname:</h:outputLabel>
                        <p:inputText id="surname" value="#{registrationBean.user.secondName}">
                            <p:ajax update="namemsg"/>
                        </p:inputText>
                        <p:message id="surnamemsg" for="surname" />

                        <h:outputLabel for="city">City</h:outputLabel>
                        <p:inputText id="city" value="#{registrationBean.user.city}">
                            <p:ajax update="city"/>
                        </p:inputText>
                        <p:message id="citymsg" for="city" />

                        <h:outputLabel for="district">District</h:outputLabel>
                        <p:inputText id="district" value="#{registrationBean.user.district.name}">
                            <p:ajax update="district"/>
                        </p:inputText>
                        <p:message id="districtmsg" for="district" />

                        <h:outputLabel for="email">Email:</h:outputLabel>
                        <p:inputText id="email" value="#{registrationBean.user.email}" >
                            <p:ajax update="emailmsg"/>
                        </p:inputText>
                        <p:message id="emailmsg" for="email" />

                        <h:outputLabel for="password">Password:</h:outputLabel>
                        <p:password id="password" value="#{registrationBean.user.password}"
                                    feedback="true" match="pwd2" label="Password"/>
                        <p:message for="password" />

                        <h:outputLabel for="pwd2">Confirm Password:</h:outputLabel>
                        <p:password id="pwd2" label="Confirm Password"/>

                    </h:panelGrid>             
                    <p:commandButton id="submit" value="Register" update="regGrid"
                                     action="#{registrationBean.register()}" />

                </p:panel>
            </h:form>     
            <p:link outcome="login" value="Return to login page"/><br/>
        </div>
    </h:body>
</html>

